<template>
	<view class="submit_rder">
		<image src="http://qianxueapplet.suoeryun.com/dingdan.png" class="submit_rder_img">
		</image>
		<view class="submit_rder_info">
			<view class="submit_rder_info_address">
				<view class="submit_rder_info_address_title">
					<image src="http://qianxueapplet.suoeryun.com/dingwei.png"
						class="submit_rder_info_address_title_left"></image>
					<view class="submit_rder_info_address_title_right" @click="handleEditAddress">
						<view class="submit_rder_info_address_title_right_left">
							<template v-if="parameter?.consignee">
								<text>{{parameter?.consignee}}</text>
								<text>{{maskPhoneNumber(parameter?.phoneNumber)}}</text>
								<view class="submit_rder_info_address_body overflow">
									<template v-if="parameter?.location">
										{{parameter?.location?.replaceAll(',','')}}</template>
									{{parameter?.address}}
								</view>
							</template>
							<template v-else><text>请选择收货地址</text></template>
						</view>
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>
			</view>
			<view class="submit_rder_info_goods">
				<view class="submit_rder_info_goods_title">商品信息</view>
				<view class="submit_rder_info_goods_body">
					<image :src="parameter?.goodsImages" class="submit_rder_info_goods_body_left"></image>
					<view class="submit_rder_info_goods_body_right">
						<view class="submit_rder_info_goods_body_right_top">
							<view class="submit_rder_info_goods_body_right_top_1">
								{{parameter?.goodsName}}
							</view>
							<view class="submit_rder_info_goods_body_right_top_2">
								<text class="submit_rder_info_goods_body_right_top_2_left"
									v-if="parameter?.specifications">{{parameter?.specifications}}</text>
							</view>
						</view>
						<view class="submit_rder_info_goods_body_right_btm">
							<view class="submit_rder_info_goods_body_right_btm_price goods_price18">
								<text>￥</text>{{parameter?.unitPrice}}
							</view>
							<u-number-box v-model="parameter.orderNum" integer button-size="20"
								:max="parameter?.inventory"></u-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="submit_rder_info_remark">
				<view class="submit_rder_info_remark_title">备注</view>
				<u-textarea v-model="parameter.remark" placeholder="请填写备注信息" count maxlength="150"
					border="none"></u-textarea>
			</view>
			<view class="submit_rder_info_amount">
				<view class="submit_rder_info_amount_item">
					<text>商品金额</text>
					<view class="submit_rder_info_amount_item_right">
						￥{{Number(parameter?.unitPrice) * Number(parameter?.orderNum)}}
					</view>
				</view>
				<view class="submit_rder_info_amount_item" v-if="parameter?.freightCharges !== undefined">
					<text>运费</text>
					<view class="submit_rder_info_amount_item_right">
						<text class="submit_rder_info_amount_postage" v-if="parameter?.freightCharges === 0">商家包邮</text>
						<text v-if="parameter?.freightCharges">&nbsp;&nbsp;&nbsp;￥{{parameter?.freightCharges}}</text>
					</view>
				</view>
				<view class="submit_rder_info_amount_btm">
					<text>合计：</text>
					<view class="goods_price20">
						<text>￥</text>{{totalPrice}}
					</view>
				</view>
			</view>
		</view>
		<view class="submit_rder_btm btm_btm safe_area">
			<view class="submit_rder_btm_row btm_btm_row">
				<view class="goods_price20">
					<text>￥</text>{{totalPrice}}
				</view>
				<button @click="handlePay" :disabled="!parameter.consignee">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref, unref, computed } from 'vue';
	import { maskPhoneNumber, myFixed } from '@/util/index';
	import { qxGoodsOrderAdd, queryFreightByGoodsIdALocationCode } from '@/config/goodStuff.api';

	const parameter = ref({
		orderNum: 1,
		remark: '',
		address: "",
		attributeId: "",
		consignee: "",
		freightTemplateId: "",
		goodsCategoryId: "",
		goodsCategoryName: "",
		goodsId: "",
		goodsName: "",
		location: "",
		locationCode: "",
		phoneNumber: "",
		specifications: "",
		totalPrice: 0,
		unitPrice: 0,
		templateId: '',
		templateName: '',
		freightCharges: '',
		goodsImages: '',
		inventory: 1,
	});
	const totalPrice = computed(() => {
		const info = unref(parameter);
		// 有运费
		if (info?.freightCharges) {
			return myFixed((Number(info?.unitPrice) * Number(info?.orderNum)) + Number(info?.freightCharges), 2);
		} else {
			return myFixed((Number(info?.unitPrice) * Number(info?.orderNum)), 2);
		}
	})
	onMounted(async () => {
		parameter.value = uni.getStorageSync('orderInfo');
		// 修改地址回调
		uni.$on('selectAddress', async (item) => {
			parameter.value.freightCharges = item?.freightCharges; //运费
			parameter.value.location = item?.location; //收货地区
			parameter.value.locationCode = item?.locationCode; //收货地区code
			parameter.value.address = item?.address; //收货详情地址
			parameter.value.phoneNumber = item?.phoneNumber; //收货人手机号码
			parameter.value.consignee = item?.consignee; //收货人名称
			parameter.value.templateId = item?.templateId; //邮费Id
			parameter.value.templateName = item?.templateName; //邮费名称
			parameter.value.freightCharges = item?.freightCharges; //运费金额
		})
	})

	/**
	 * 支付
	 */
	async function handlePay() {
		const info = unref(parameter);
		uni.showLoading();
		// 创建订单
		const res = await qxGoodsOrderAdd({
			...info,
			totalPrice: (Number(info?.unitPrice) * Number(info?.orderNum)) + Number(info?.freightCharges)
		});
		//#ifdef MP-WEIXIN
		uni.showLoading();
		uni.requestPayment({
			provider: 'wxpay',
			orderInfo: {},
			timeStamp: res?.paymentResponse?.timeStamp,
			nonceStr: res?.paymentResponse?.nonceStr,
			package: res?.paymentResponse?.packageVal,
			signType: res?.paymentResponse?.signType,
			paySign: res?.paymentResponse?.paySign,
			success: function (data) {
				uni.hideLoading();
				console.log('success:' + JSON.stringify(data));
				uni.$u.route({
					url: '/pages/goodStuff/paymentSuccess', type: 'redirectTo', params: {
						orderId: res?.orderId,
						address: `${info?.location ? info?.location?.replaceAll(',', '') : ''}${info?.address}`,
						amountPayable: Number(info?.totalPrice ?? 0) + Number(info?.freightCharges ?? 0)
					}
				});
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err));
				uni.hideLoading();
				uni.$u.route({
					url: 'pages/goodStuff/orderDetails',
					type: 'redirectTo',
					params: {
						id: res?.orderId
					}
				})
			}
		});
		//#endif

	}

	/**
	 * 选择收货地址
	 */
	function handleEditAddress() {
		uni.$u.route('/pages/goodStuff/selectAddress', {
			freightTemplateId: parameter.value?.freightTemplateId || parameter.value?.templateId,
		});
	}
</script>

<style lang="scss" scoped>
	.submit_rder {
		.submit_rder_img {
			width: 100vw;
			height: 4rpx;
			display: block;
		}

		.submit_rder_info {
			padding: 12rpx 24rpx 88rpx 24rpx;

			.submit_rder_info_remark {

				.submit_rder_info_remark_title {
					font-size: 32rpx;
					font-size: 500;
					padding-bottom: 16rpx;
					border-radius: 12rpx;
				}

				::v-deep .u-textarea {
					background-color: #F6F6F6;

					.u-textarea__field {
						font-size: 28rpx !important;
					}

					.u-textarea__count {
						background-color: #F6F6F6 !important;
						color: #B8B8B8 !important;
					}
				}
			}
		}

		.submit_rder_btm {
			.submit_rder_btm_row {
				justify-content: space-between;
			}
		}
	}
</style>